<template>
  <div class="form">
    <div class="row">
      文本输入框：<input v-model="text" placeholder="edit me" class="input">
      <p class="browser">text is: {{ text }}</p>
    </div>
    <div class="row">
      过滤空白符：<input v-model.trim="text2" placeholder="edit me" class="input">
      <p class="browser">text is: {{ text2 }}</p>
    </div>
    <div class="row">
      多行文本框：<textarea class="textarea" v-model="textarea" cols="30" rows="4"></textarea>
      <p class="browser">text is: {{ textarea }}</p>
    </div>
    <div class="row">
      这是复选框：<input type="checkbox" v-model="checked">
      <p class="browser">text is: {{ checked }}</p>
    </div>
    <div class="row">
      多个复选框：
      <input type="checkbox"  :checked="fruitIds.indexOf('apple')>=0"  @click='checkedOne("apple")'>  apple&nbsp;&nbsp;
      <input type="checkbox"  :checked="fruitIds.indexOf('orange')>=0" @click='checkedOne("orange")'> orange
      <p class="browser">text is: {{ fruitIds }}</p>
    </div>
    <div class="row">
      复选框的值：
      <input
        type="checkbox"
        v-model="toggleCheckbox"
        true-value="选中是为yes"
        false-value="否则就为no"
      >
      <p class="browser">text is: {{ toggleCheckbox }}</p>
    </div>
    <div class="row">
      单选框示例：
      <input type="radio" value="apple"  v-model="radio"> apple&nbsp;&nbsp;
      <input type="radio" value="orange" v-model="radio"> orange
      <p class="browser">text is: {{ radio }}</p>
    </div>
    <div class="row">
      下拉框示例：
      <select class="input" v-model="select">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <p class="browser">text is: {{ select }}</p>
    </div>
    <div class="row">
      下拉框多选：
      <select class="input" v-model="multSelect" multiple>
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <p class="browser">text is: {{ multSelect }}</p>
    </div>
  </div>
</template>
<script type="text/javascript">
  import data from './data'
  import methods from './method'

  export default{
    name: 'form01',
    data(){
      return data.init();
    },
    methods:methods,
    mounted(){
      this.test();
    }
  }
</script>
<style type="text/css">
  .form{
    padding:20px;
    font-size:16px !important;
  }
  .form .row{
    margin:5px;
  }
  .form .input,.form .textarea{
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width:350px;
  }
  .form .input{
    height: 40px;
    line-height: 40px;
  }
  .form .textarea{
  }
  .form .browser{
    padding-left:20px;background: #f2f2f2;padding:4px;letter-spacing: 2px;
    border-radius:4px;margin-top:2px;
    color:#888;
  }
</style>
